<template>
  <div>
    <!-- <h1>前台首页</h1> -->
   
<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b"
  style="display:flex;justify-content:center">
  <!-- <el-menu-item index="1">联系客服</el-menu-item> -->
  <el-menu-item ><img src="../img/logo.png" @click="gotoIndex()"></el-menu-item>
  <el-menu-item @click="gotoIndex()">首页</el-menu-item>
  <el-menu-item index="4" @click="car"><i class="el-icon-shopping-cart-2" ></i>购物车</el-menu-item>
  <el-menu-item index="5" @click="pay">充值中心</el-menu-item>
  <el-menu-item index="6" @click="order">我的订单</el-menu-item>
  <el-menu-item index="7" @click="address">收货地址</el-menu-item>
  <el-menu-item index="8" @click="dposistdetil">个人充值查询</el-menu-item>
  <el-menu-item index="9" @click="myShop">我的</el-menu-item>
  
      <el-button style="float: right; padding: 3px 0" type="text" @click="gotoLogin()" >登出</el-button>
      <el-button style="float: right; padding: 3px 0" type="text" @click="myShop()" v-if="hasUser">欢迎您，{{userName}}</el-button>

</el-menu>
<div></div>
<div style="display:flex;justify-content:center">
  <el-form label-width="80px">
  <el-form-item label="">
    <el-row>
    <el-col>
    <el-input
    placeholder="请输入想要查询的商品"
    prefix-icon="el-icon-search"
    style="width:500px;margin-top:50px;"
    v-model="info">
  </el-input>

   <el-select v-model="type" placeholder="请选择" @change="findallgoods(1)">
     <el-option label="男装" value="男装"></el-option>
     <el-option label="女装" value="女装"></el-option>
     <el-option label="全部" value="null"></el-option>
  </el-select>
  
  <el-button type="primary" success @click="findallgoods()">搜索</el-button></el-col></el-row>
  </el-form-item>
  </el-form>
  </div>

  <div>
  <el-row style="margin-left:200px;margin-top:20px">            
		<el-col :span="4" v-for="(item,index) in tabledata" :key="item.productId" :offset="index > 0 ? 1 : 1" >                
		<div style="margin-top:15px">                    
			<el-card :body-style="{ padding: '0px'}" shadow="hover" style="width:240px;height:360px" >
			<div>
        <a @click="gotoGoodsDetail(item)">
        <el-image :src="item.photo" style="width:240px;height:240px">
        </el-image>
        </a>
      </div>
      <div>  

			<div style="margin:15px"><span><a @click="gotoGoodsDetail(item)">{{item.productName}}</a></span><br><span>{{item.productPrice/100}}</span><br>    </div>
			<div style="display:flex">                                      
				<el-button type="primary" class="button" style="width:80px;height:40px;margin-left:15px;padding: 0px 0px;" @click="gotoOrder(item)">直接购买</el-button>
        <el-button type="primary" class="button" style="width:80px;height:40px;margin-left:15px;padding: 0px 0px;" @click="addShopCar(item)">加入购物车</el-button>

      </div>                
			</div>                
			</el-card>                
		</div>            
		</el-col>        
		</el-row> 
    
    
  </div>

    <div class="block" style="display:flex;justify-content:center;margin-top:40px">
    <el-pagination
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
            :page-size = "pageSize"
            layout="prev, pager, next"
            :total="total"
            style="height:50px"
    >
  </el-pagination>
  </div>
  
  </div>

</template>

<script>
import{mapState,mapMutations} from 'vuex'
export default {
 data() {
      return {
        hasUser:false,
        tabledata:[],
        photoList:[],
        total:3,
        currentDate: new Date(),
        activeIndex2: '1',
        dialogFormVisible:false,
        resource1:"",
        pageNO:1,
        pageSize:2,
        currentPage: 1,
        pages:"",
        type:null,
        info:null,
        form:"",
        userId:"",
        userName:"",
        
       



      };
    },
    computed: {
    ...mapState(['goods'])
  },
  mounted() {
    //is user
    this.hasUser=true
    let jsonUser= sessionStorage.getItem("user")
    console.log(jsonUser)
    if(jsonUser==''||null==jsonUser){
      this.$message.warning("请先登录")
      this.$router.push("/")
    }else {
      //json String to  json object
      let jsonObj= JSON.parse(jsonUser)
      this.userName = jsonObj.userName
      this.userId= jsonObj.userId
      this.hasUser=true
    }
    this.findallgoods(1)
  },
    methods:{
      handleCurrentChange(val) {
        console.log(val)
      this.findallgoods(val)
    },
      ...mapMutations(['setProductId']),
      findallgoods(pageNO){
       this.tabledata=[]
       
          this.$axios.get("/api/product/showProduct/"+this.pageNO+"/"+this.pageSize+"/"+this.type+"/"+this.info).then(
              r=>{
                console.log(r.data)
                console.log(r.data.pageNum)
                this.pageNO = r.data.pageNum
                console.log(r.data.total)
               for(let p of r.data.list){
                 console.log(p.productId)
                p.photo=p.photoList[0].productPhoto
                this.tabledata.push(p)
               }
               }
          )
        // console.log(this.tabledata)
      },
      gotoLogin(){
        this.hasUser=false
        this.$router.push('/')
      },
      gotoOrder(item){
        let jsonUser=sessionStorage.getItem("userData")
        let data=JSON.parse(jsonUser)
        if (data.userId==0){
          console.log("bbb")
          this.$message.warning("请先补全信息")
          this.$router.push("/addUserInfo")
        }else {
          let pList=[]
          let p={}
          p.checked=false
          p.productAmount=1
          p.productPhoto=item.photoList[0].productPhoto
          p.productPrice=item.productPrice/100
          p.productId=item.productId
          p.productName=item.productName
          p.userId=this.userId
          pList.push(p)
          let jsonUser = JSON.stringify(pList)
          sessionStorage.setItem("data",jsonUser)
          this.$router.push('/addOrder')
        }

      },
      gotoIndex(){
        this.$router.push("/ShopIndex")
      },
      order(){this.$router.push('/UserOrder')
      },
       address(){this.$router.push('getGoodsAddress')
      },
      pay(){this.$router.push('/deposit')
      },
      car(){
        this.$router.push('/ShopCar')
      },
      dposistdetil(){
        this.$router.push('/depositDetail')
      },
      gotoGoodsDetail(item){
        console.log(item.productId)
        this.$router.push('/ShopIndexDetail')
        this.setProductId(item.productId)
        let jsonP = JSON.stringify(item.productId)
        sessionStorage.setItem("productId",jsonP)
        
      },
      addShopCar(item){
        console.log(item)
        let fd=new FormData()
        fd.append("productId",item.productId)
        fd.append("userId",this.userId)
        fd.append("productPhotoId",item.photoList[0].productPhotoId)
        this.$axios.post("/api/car/addCar",fd)
        this.$router.push('/ShopCar')
      },
      myShop(){
        this.hasUser=true
        this.$router.push('/user')
      }
},
 created(){

       }
}
</script>

<style>
.time {
    font-size: 13px;
    color: #999;
  }
  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }
 
</style>